<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/>
    <meta charset="utf-8">
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <title>Mounting Lifecycle</title>
</head>
<body>
<div id="react-container"></div>
  <script type="text/babel">

  const { Component } = React
  const { render } = ReactDOM

  const getFakeMembers = count => new Promise((resolves, rejects) => {
      const api = `https://api.randomuser.me/?nat=US&results=${count}`
      const request = new XMLHttpRequest()
      request.open('GET', api)
      request.onload = () => (request.status == 200) ?
        resolves(JSON.parse(request.response).results) :
        reject(Error(request.statusText))
      request.onerror = (err) => rejects(err)
      request.send()
  })

  const Member = ({ email, picture, name, location }) =>
      <div className="member">
          <img src={picture.thumbnail} alt="" />
          <h1>{name.first} {name.last}</h1>
          <p><a href={"mailto:" + email}>{email}</a></p>
          <p>{location.city}, {location.state}</p>
      </div>


  class MemberList extends Component {

      constructor() {
          super()
          this.state = {
              members: [],
              loading: false,
              error: null
          }
      }

      componentWillMount() {
          this.setState({loading: true})
          getFakeMembers(this.props.count).then(
              members => {
                  this.setState({members, loading: false})
              },
              error => {
                  this.setState({error, loading: false})
              }
          )
      }

      componentWillUpdate() {
          console.log('updating lifecycle')
      }

      render() {
          const { members, loading, error } = this.state
          return (
              <div className="member-list">
                  {(loading) ?
                      <span>Loading Members</span> :
                      (members.length) ?
                          members.map((user, i) =>
                              <Member key={i} {...user} />
                          ) :
                          <span>0 members loaded...</span>
                  }
                  {(error) ? <p>Error Loading Members: {error.message}</p> : ""}
        </div>
      )
    }
  }

  render(
      <MemberList count={5} />,
      document.getElementById('react-container')
  )

  </script>
</body>
</html>
